<template>
  <div>
    <!-- inline代表的是行内表单， 代表一行可以放置多个表单元素  -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select v-model="cForm.category1Id" placeholder="请选择" :disabled="isShow" @change="handler1">
          <el-option v-for="item1 in list1" :key="item1.id" :label="item1.name" :value="item1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="cForm.category2Id" :disabled="isShow" placeholder="请选择" @change="handler2">
          <el-option v-for="item2 in list2" :key="item2.id" :label="item2.name" :value="item2.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="cForm.category3Id" :disabled="isShow" placeholder="请选择" @change="handler3">
          <el-option v-for="item3 in list3" :key="item3.id" :label="item3.name" :value="item3.id"/>
        </el-select>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CategorySelect',
  props: ['isShow'],
  data() {
    return {
      // 一级分类数据
      list1: [],
      // 二级分类数据
      list2: [],
      // 三级分类数据
      list3: [],
      // 收集相应的一级二级三级分类的id
      cForm: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      }
    }
  },
  created() {
    this.getCategory1List()
  },
  methods: {
    // 获取一级分类数据的方法
    async getCategory1List() {
      const result = await this.$API.attr.reqCatetgory1List()
      if (result.code === 200) {
        this.list1 = result.data
      }
    },
    // 一级分类selete的事件回调(当一级分类的option发生变化的时候 获取相应二级分类的数据)
    async handler1() {
      // 清除数据
      this.list2 = []
      this.list3 = []
      this.cForm.category2Id = ''
      this.cForm.category3Id = ''
      // 解构出一级分类的id
      const {category1Id} = this.cForm
      // 将一级分类id传给父组件
      this.$emit('getCartgoryId', { categoryId: category1Id, level: 1 })
      // 通过一级分类的id拿到二级分类的数据
      const result = await this.$API.attr.reqCategory2List(category1Id)
      if (result.code === 200) {
        this.list2 = result.data
      }
    },
    // 二级分类selete的事件回调(当二级分类的option发生变化的时候 获取相应二级分类的数据)
    async handler2() {
      // 清除数据
      this.list3 = []
      this.cForm.category3Id = ''
      // 解构出一级分类的id
      const {category2Id} = this.cForm
      // 将二级分类id传给父组件
      this.$emit('getCartgoryId', { categoryId: category2Id, level: 2 })
      // 通过一级分类的id拿到二级分类的数据
      const result = await this.$API.attr.reqCategory3List(category2Id)
      if (result.code === 200) {
        this.list3 = result.data
      }
    },
    // 三级分类selete的事件回调(当三级分类的option发生变化的时候 获取相应二级分类的数据)
    async handler3() {
      // 解构出一级分类的id
      const {category3Id} = this.cForm
      // 将三级分类id传给父组件
      this.$emit('getCartgoryId', { categoryId: category3Id, level: 3 })
    }

  }
}

</script>

<style scoped>

</style>
